<!--{template "topic_header"}-->
<script type="text/javascript" src="js/validate.js"></script>
<div class="setframe">
<!--{template 'settings_main_left.inc'}-->
<div class="setframeWrap">
<div class="set_warp" style="_width:750px;">
<h3>个人首页形象图</h3>
<form action="index.php?mod=settings&code=doprofile" method="post" enctype="multipart/form-data">
	<input type="file" name="image" style="padding:1px;">
	<input type="submit" value="上传" class="btnText" >
</form>

<!--{if $image_file}-->
<!--src后面加上时间戳，防止因浏览器缓存造成不更新-->
<img src="{$image_file}?{eval echo time();}" id="cropbox" style="max-width:750px;"/>
<form action="index.php?mod=settings&code=cutprofile" method="post">
	<input type="hidden" name="image_path" value="{$image_file}">
	<input type="hidden" id="x" name="x" >
	<input type="hidden" id="y" name="y" >
	<input type="hidden" id="w" name="w" >
	<input type="hidden" id="h" name="h" >
	<input type="submit" value="确认剪裁" class="btnText">
</form>
<script type="text/javascript" src="templates/default/js/jquery.Jcrop.js"></script> 
<script language="Javascript">
jQuery(function($){
	var jcrop_api, boundx, boundy;
	$('#cropbox').Jcrop({
		minSize: [0,0],
		maxSize:[960,300],
		setSelect: [0,0,960,300],
		aspectRatio:960/300,
		onSelect: updateCoords,
	},
	function(){
		// Use the API to get the real image size
		var bounds = this.getBounds();
		boundx = bounds[0];
		boundy = bounds[1];
		// Store the API in the jcrop_api variable
		jcrop_api = this;
		
	});
	function updateCoords(c){
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
	function checkCoords(){ 
	  if (parseInt($('#w').val())) return true;
	  alert('请选择裁剪区域');
	  return false;
	  }; 
	});

 </script>
 <style type="text/css">
.jcrop-holder { text-align: left; margin:10px 0; }
.jcrop-vline, .jcrop-hline
{font-size: 0;position: absolute;background: white url('./templates/default/images/jcrop.gif') top left repeat;}
.jcrop-vline { height: 100%; width: 1px !important; }
.jcrop-hline { width: 100%; height: 1px !important; }
.jcrop-handle {
font-size: 1px;
width: 7px !important;
height: 7px !important;
border: 1px #eee solid;
background-color: #333;
*width: 9px;
*height: 9px;
}
.jcrop-tracker { width: 100%; height: 100%; }
.custom .jcrop-vline,
.custom .jcrop-hline{background: yellow;}
.custom .jcrop-handle{border-color: black;background-color: #C7BB00;-moz-border-radius: 3px;-webkit-border-radius: 3px;}
.Image {
max-width:600px;height:auto;cursor:pointer;
border-radius:4px;/*margin:15px 0;*/ display:block;
zoom:expression( function(elm) {
if (elm.width>540) {
var oldVW = elm.width; elm.width=540;
elm.height = elm.height*(540 /oldVW);
}
elm.style.zoom = '1';
}(this));
}
</style>
<!--{/if}-->
</div>
</div>
</div>


<!--{template "topic_footer"}-->